import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { Button } from 'antd-mobile'
import SetUpVM from 'cvm/setUp/setUp'
import './setUp.less'

const SetUpList = observer(({ vm }) => {
  return (
    <div className='set-up'>
      <div className='flex-wrap change-box margin-top'>
        <div className='flex-1'>手机号</div>
        <div className='flex-1 phone' onClick={() => { vm.handleToChangePhone() }}>{vm.phoneNumber}<img src={require('../../images/right.png')} /></div>
      </div>
      <div className='flex-wrap change-box'>
        <div className='flex-1'>密码</div>
        <div className='flex-1 phone' onClick={() => { vm.handleToChangePassword() }}><img src={require('../../images/right.png')} /></div>
      </div>
      <div className='btn-box'>
        <Button type='primary' onClick={() => vm.handleSignOut()}>退出登录</Button>
      </div>
    </div>
  )
})

@observer
class setUp extends Component {
  constructor (props) {
    super(props)
    window.document.title = '设置'
    this.vm = new SetUpVM(props)
  }
  render () {
    return (
      <div>
        <SetUpList vm={this.vm} />
      </div>
    )
  }
}

export default setUp
